<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="物料/服务">
            <el-select v-model="form.itemServeId" placeholder="请选择">
                <el-option v-for="a in inventoryInfo" :label="a.itemServeName" :value="a.itemServeId" />
            </el-select>
        </el-form-item>
        <el-form-item label="物料编码">
            <el-input v-model="form.itemCode" @click="GetQrCode()" />
        </el-form-item>
        <el-form-item label="物料名称">
            <el-input v-model="form.itemName" />
        </el-form-item>
        <el-form-item label="物料类别">
            <el-select v-model="form.itemTypeId" placeholder="请选择">
                <el-option v-for="a in itemType" :label="a.itemTypeName" :value="a.itemTypeId" />
            </el-select>
        </el-form-item>
        <el-form-item label="物料单位">
            <el-select v-model="form.itemUnitId" placeholder="请选择">
                <el-option label="克" :value=1 />
                <el-option label="千克" :value=2 />
                <el-option label="吨" :value=3 />
            </el-select>
        </el-form-item>
        <el-form-item label="规格">
            <el-input v-model="form.specName" />
        </el-form-item>
        <el-form-item label="规格单位">
            <el-select v-model="form.specsUnitId" placeholder="请选择">
                <el-option v-for="a in Unit" :label="a.specsUnitName" :value="a.specsUnitId" />
            </el-select>
        </el-form-item>
        <el-form-item label="包装规格">
            <el-input v-model="form.wrapSpecs" />
        </el-form-item>
        <el-form-item label="启动质检管理">
            <el-select v-model="form.isQuality" placeholder="请选择">
                <el-option label="是" :value=true />
                <el-option label="否" :value=false />
            </el-select>
        </el-form-item>
        <el-form-item label="库存上限">
            <el-input v-model="form.inventoryLimit" />
        </el-form-item>
        <el-form-item label="库存下限">
            <el-input v-model="form.inventoryMinimum" />
        </el-form-item>
        <el-form-item label="存货科目">
            <el-input v-model="form.inventoryAccount" />
        </el-form-item>
        <el-form-item label="销货收入科目">
            <el-input v-model="form.salesRevenueAccount" />
        </el-form-item>
        <el-form-item label="销货成本科目">
            <el-input v-model="form.soldAccount" />
        </el-form-item>
        <el-form-item label="物料二维码">
            <img v-if="form.itemQRCode" :src="form.itemQRCode" class="avatar" />
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="form.itemInfoState" placeholder="请选择">
                <el-option label="是" :value=true />
                <el-option label="否" :value=false />
            </el-select>
        </el-form-item>
        <el-button type="success" @click="add()">添加</el-button>
    </el-form>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'
const router = useRouter()
import QRCode from 'qrcode'
import { Plus } from '@element-plus/icons-vue'
const apiurls = import.meta.env.VITE_APP_API_URL_ProductionAdd;
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;
const form = reactive({
  inventoryInfoId: 0,
  itemServeId: "",
  itemCode: "",
  itemName: "",
  itemTypeId: "",
  itemUnitId: "",
  specName: "",
  specsUnitId: "",
  wrapSpecs: "",
  isQuality: "",
  inventoryLimit: 0,
  inventoryMinimum: 0,
  inventoryAccount: "",
  salesRevenueAccount: "",
  soldAccount: "",
  itemQRCode: "",
  itemInfoState: "",
  reviewStatus: true,
  handle: "MaxAdmin",
  handleContext: "添加物料清单",
  handleTime: "",
  pid: 1,
  isDelete: true,
});
//物料/服务下拉框
const inventoryInfo = ref([]);
const getinventoryInfo = () => {
    axios.post(apiurl + '/api/ShowMaterial/GetMaterial', {}).then(res => {
        inventoryInfo.value = res.data.data
    })
}
//物料单位下拉框
const itemServe = ref([]);
const getitemServe = () => {
    axios.post(apiurl + '/api/ShowMaterial/GetItemUnit', {}).then(res => {
        itemServe.value = res.data.data
    })
}
//物料类别下拉框
const itemType = ref([]);
const getitemType = () => {
    axios.post(apiurl + '/api/ShowMaterial/GetItemType', {}).then(res => {
        itemType.value = res.data.data
    })
}
//规格单位

const Unit = ref([])
const getUnit = () => {
    axios.post(apiurl + '/api/ShowMaterial/GetSpecsUnit', {
    }).then(res => {
        Unit.value = res.data.data
    })
}
//添加物料管理
const add = () => {
    axios.post(apiurls + '/api/Material/AddMaterial', {
        inventoryInfoId: form.inventoryInfoId,
        itemServeId: form.itemServeId,
        itemCode: form.itemCode,
        itemName: form.itemName,
        itemTypeId: form.itemTypeId,
        itemUnitId: form.itemUnitId,
        specName: form.specName,
        specsUnitId: form.specsUnitId,
        wrapSpecs: form.wrapSpecs,
        isQuality: form.isQuality,
        inventoryLimit: Number(form.inventoryLimit),
        inventoryMinimum: Number(form.inventoryMinimum),
        inventoryAccount: form.inventoryAccount,
        salesRevenueAccount: form.salesRevenueAccount,
        soldAccount: form.soldAccount,
        itemQRCode: form.itemQRCode,
        itemInfoState: form.itemInfoState,
        reviewStatus: true,
        IsDelete: false,
        handle: form.handle,
        handleContext: form.handleContext,
        handleTime: new Date(),
        pid: form.pid
    }).then(res => {
        if (res.data.code > 0) {
            ElMessage.success("添加成功")
            router.push({ name: 'MaterialManagementList' })
        } else {
            ElMessage.error("添加失败")
        }
    })
}
//二维码
async function GetQrCode() {
    console.log(form.itemCode)
    form.itemQRCode = await QRCode.toDataURL(form.itemCode)

}
onMounted(() => {
  getinventoryInfo();
  getitemServe();
  getitemType();
  getUnit();
});
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
